/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20231104
* @version:0.1.8
* @type:interface
* @description:
* # SSwitchGroup
* SSwitchGroup switch group can contain more switch cases
* ## properties inherits SCard
* - in-out property <string> active : active option value
* - in-out property <[SOption]> switchs : switch options
* - in property <length> font-size : font size , it will effect switch component height
* - private property <brush> theme-color : inner theme color
* ## callbacks
* - callback clicked(int,SOption) : run if you click the switch , it will back option index and option name
* ============================================
*/
import { SCard } from "../card/index.slint";
import { ROOT-STYLES,DefaultSSwitchGroupProps } from "../../themes/index.slint";
import { SText } from "../text/index.slint";
import { Themes,ShadowType,UseSurrealismFn,PaddingType,SOption,BorderType } from "../../use/index.slint";

export component SwitchGroup inherits SCard { 
  card-height: DefaultSSwitchGroupProps.card-height;
  card-width: DefaultSSwitchGroupProps.card-width;
  border-type: DefaultSSwitchGroupProps.border-type;
  shadow-type: DefaultSSwitchGroupProps.shadow-type;
  border-radius: root.height / 2;
  padding-type: DefaultSSwitchGroupProps.padding-type;
  clip: true;
  in-out property <string> active : DefaultSSwitchGroupProps.active;
  in-out property <[SOption]> switchs : DefaultSSwitchGroupProps.switchs;
  font-size : DefaultSSwitchGroupProps.font-size;
  font-weight: DefaultSSwitchGroupProps.font-weight;
  font-italic: DefaultSSwitchGroupProps.font-italic;
  font-family: DefaultSSwitchGroupProps.font-family;
  private property <brush> theme-color : root.background;
  callback clicked(int,SOption);
  view:= HorizontalLayout {
    width: root.width - root.padding-left / 4 - root.padding-right / 4 ;
    alignment: space-between;
    height: root.height - ROOT-STYLES.sur-padding.icon.padding-top;
    for item[index] in switchs: SCard{
      theme: root.theme;
      card-width: inner-text.width;
      height: parent.height;
      padding-type: PaddingType.Small;
      background: root.active == item.value ? UseSurrealismFn.deeper(root.theme,root.theme-color) : theme-color;
      // remove border
      border-type: BorderType.None;
      // make border-radius round
      border-radius: self.height / 2;
      // remove shadow
      drop-shadow-blur: 0;
      drop-shadow-offset-x: 0;
      drop-shadow-offset-y: 0;
      TouchArea {
        mouse-cursor: pointer;
        clicked => {
          root.clicked(index,item);
          if(root.active != item.value){
           root.active = item.value; 
          }
        }
        inner-text:= SText {
          font-size: root.font-size;
          font-italic: root.font-italic;
          font-weight: root.font-weight;
          font-family: root.font-family;
          text: item.label;
          theme: root.theme;
          wrap: TextWrap.no-wrap;
        }
      }
    }
  }
  
} 